<template>
  <div class="goodDetail" id="transitionName">
    <Detail-Header title="商品详情"></Detail-Header>
    <div class="goodDetailList">
      <div class="goodDetaiSwipe">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="url in goodDetail.goodsDetailSwipeUrls">
            <img :src="url.swipe" alt="图片" style="width: 100%">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="goodDetailMain">
        <div class="goodDetailName">{{goodDetail.title}}</div>
        <div style="text-align: justify;font-size: 0.348rem;">
          <span style="margin-left:-.2rem;color:#FF4B3D;">【{{goodDetail.homeBright}}】</span>
          {{goodDetail.des}}
        </div>
        <div class="goodDetailPaid">￥{{goodDetail.price}}</div>
      </div>

      <div class="goodDetailValue">
        <div class="_param" style="margin-bottom: 10px ; display: flex">规格:
          <ul class="listCom2  list-arrow2  no-top">
            <li v-for='(param,index) of goodDetail.type'>
              <div class='paramStyle'>
                <div :class="{active:index===listIndex}" @click="btn(index)">{{param}}</div>
              </div>
            </li>
          </ul>
        </div>

        <div class="_Value">购买数量：</div>
        <div class="_cartNumber" style="margin-left: 2rem;">
          <a href="javascript:;" @click="jian()" class="goodDetailReduce">-</a>
          <input type="text" v-model="goodDetail.num" readonly="readonly"/>
          <a href="javascript:;" @click="jia()" class="goodDetailAdd">+</a>
        </div>
      </div>

      <Detail-Layer style="display: none"></Detail-Layer>

      <div class="goodDetailBox">
        <mt-navbar v-model="selected">
          <mt-tab-item id="tab-container1">图文详情</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected" swipeable>
          <mt-tab-container-item id="tab-container1">
            <div class="goodDetailImg">
              <p v-for="Image in goodDetail.goodsDetail">
                <img v-bind:src="Image" alt="详情图片">
              </p>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>

      <div class="goodDetailFooter">

        <div class="rigth">
          <div class="purchase">
            <a href="javascript:void(0);" @click="pay()">立即预定</a>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
  import DetailHeader from "./component/DetailHeader";
  import DetailLayer from "./component/DetailLayer";
  import {MessageBox} from 'mint-ui';

  export default {
    name: "goodDetail",
    data() {
      return {
        listIndex: 0,
        goodDetailHeader: "商品详情",
        selected: "tab-container1",
        goodDetail: {},
        //所有规格
      };
    },
    components: {
      DetailHeader,
      DetailLayer
    },

    created() {
      let id = this.$route.query.id;
      let postData = this.$qs.stringify({
        goodId: id,
      });
      this.$axios.get(this.$apis.goodsDetail, postData).then(res => {
        if (res.data.code === 1) {
          //成功
          this.goodDetail = res.data.data;
        } else {
          //弹错误提示
          this.$myUtils.bottomToast(res.data.msg)
        }
      })
        .catch(error => {
          this.$myUtils.bottomToast(error)
        });
    },

    methods: {
      //选中规格触发的方法
      btn(index) {
        this.listIndex = index;
      },

      jia: function () {
        this.goodDetail.num++;

      },
      jian: function () {
        if (this.goodDetail.num == 1) {
          this.this.goodDetail.stock = 1;
        } else {
          this.goodDetail.num--;
        }
      },
      //返回上一级
      fanhui: function () {
        this.$router.go(-1);
      },
      pay: function (id, value) {
        MessageBox
          .confirm('预定' + this.goodDetail.title + "X" + this.goodDetail.num + "  总价：" + this.goodDetail.price*this.goodDetail.num)
          .then(action => {
            this.$toast("提交");
              this.$router.push({
                path:"orderNew"
              })
        });
      //     console.log(value)
      //   this.$router.push({
      //     path: "pay",
      //     // path: "order",
      //     query: {
      //       id: id,
      //       value: value
      //     }
      //   })
      }
    }
  };
</script>

<style lang="stylus" scoped>
  .active {
    border: 1px solid #d1d1d1;
    color: red;
  }

  .peizhi {
    width: 90%;
    margin: auto;

    div {
      margin-bottom .5rem;
      margin-top .5rem;
    }

    h3 {
      height: 2rem;
      line-height: 2.3rem;
      font-size: 0.5rem;
      border-bottom: 1px solid #ccc;
    }

    span {
      font-size: 0.38rem;
      color: #888;
      margin-top: .3rem;
      display: block;
    }

    p {
      height .55rem
      color: #888;
    }
  }

  .cartlength {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 1px;
    left: 30px;
    background: #f81301;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    color: white;
  }

  .goodDetailList {
    margin-bottom: 1rem;
    padding-top: 1.45rem;
  }

  .goodDetailHeader {
    width: 100%;
    z-index: 1;
    height: 1.3rem;
    line-height: 1.3rem;
    font-size: 12px;
    background: white;
    position: fixed;
    box-shadow: 0 0 10px #cecece;
    text-align: center;
    font-size: 0.41rem;
  }

  .goodDetailHeader i {
    display: block;
    float: left;
    height: 50px;
    padding-left: 0.3rem;
    font-size: 0.71rem;
    color: black;
  }

  .goodDetaiSwipe {
    height: 8rem;
    margin-top: 3px;
    background: white;
  }

  .goodDetaiSwipe img {
    width: 70%;
    height: 7rem;
    display: block;
    /* margin-top: 60px; */
    margin: auto;
  }

  .goodDetailMain {
    /* height: 1.8rem; */
    background: white;
    border-bottom: 1px solid #cecece;
    // border-top: 1px solid #cecece;
    padding: 0.4rem;
    margin-top: -15px;
  }

  // .goodDetailBox {
  // height: 1px;
  // }
  .goodDetailName {
    color: black;
    font-weight: 400;
    font-size: 0.5rem;
    line-height 1rem
  }

  .goodDetailPaid {
    color: #f81200;
    font-size: 0.7rem;
    margin-top: 0.1rem;
  }

  .goodDetailFooter {
    position: fixed;
    width: 100%;
    bottom: 0rem;
    height: 1.2rem;
    background: #F6F4F7;
    border-top: 1px solid #efefef;

    .left {
      width: 45%;
      float: left;
      position: relative;
      font-size: .35rem;

      .cart {
        width: 33%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        float: right;
        position: relative;

        img {
          width: 0.76rem;
          height: 0.7rem;
          display: block;
          margin: auto;
        }

        span {
          text-align: center;
          color: #767676;
        }
      }

      .shop {
        width: 33%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        float: right;

        img {
          width: 0.76rem;
          height: 0.7rem;
          display: block;
          margin: auto;
        }

        span {
          display: block;
          text-align: center;
          color: #767676;
        }
      }

      .collection {
        width: 33%;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        float: right;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        color: #767676;

        .collection-box {
          text-align: center;

        }

        i {
          font-size: 0.6rem;
          display: block;
          text-align: center;
        }

        span {
          text-align: center;
        }
      }
    }

    .rigth {
      width: 100%;
      float: right;

      .add {
        a {
          display: block;
          width: 50%;
          height: 1.2rem;
          line-height: 1.2rem;
          text-align: center;
          background: #FF9800;
          color: white;
          font-size: 0.35rem;
          float: left;
        }
      }

      .purchase {
        a {
          float: left;
          display: block;
          width: 100%;
          height: 1.2rem;
          line-height: 1.2rem;
          text-align: center;
          color: white;
          font-size: 0.35rem;
          background: #E3211E;
        }
      }
    }
  }

  .gooDetailNumber {
    display: none;
  }

  .add a {
  }

  .purchase a {
  }

  .goodDetailImg {
    margin-top: 4px;
    margin-bottom: 6px;
  }

  .goodDetailImg img {
    width: 100%;
    height: auto;
    display: block;
  }

  table td {
    font-size: 0.31rem;
    text-align: center;
    color: #000;
  }

  .goodDetailValue {
    height: 2.5rem;
    border-bottom: 1px solid #cecece;
    padding: 0.4rem;
  }

  .goodDetailAdd {
    width: 1rem;
    height: 0.8rem;
    line-height: 0.8rem;
    display: block;
    background: white;
    float: left;
    border: 1px solid #b2b2b2;
    border-left: none;
    text-align: center;
    font-size: 0.5rem;
    color: black;
  }

  .goodDetailReduce {
    width: 1rem;
    height: 0.8rem;
    line-height: 0.8rem;
    display: block;
    background: white;
    float: left;
    border: 1px solid #b2b2b2;
    border-right: none;
    text-align: center;
    font-size: 0.5rem;
    color: black;
  }

  ._cartNumber input {
    width: 1rem;
    height: 0.8rem;
    line-height: 0.8rem;
    float: left;
    border: 1px solid #b2b2b2;
    text-align: center;
    color: black;
  }

  ._Value {
    float: left;
    margin-top: 0.2rem;
    font-size 0.35rem
  }

  ._param {
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-size 0.35rem
  }

  .goodDetailColor {
    display: none;
  }

  mt-button {
    size = "normal";
    type = "primary"
  }


  li {
    float: left;
    list-style: none
  }

  .paramStyle {
    background: #ffffff
    text-align center
    margin-left 10px;
    height: 20px;
    width: 50px;
    display: block;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
  }

</style>
